// 类组件必须是大写开头的组件名
// 类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性
// 类组件必须提供render方法，并返回组件的结构
// class 组件名 extends React.Component{}

import React from 'react';
//通过解构的方式解构出来createRoot
import { createRoot } from 'react-dom/client';

class HandleHello extends React.Component {
  // 声明状态变量
  state = {
    msg: 'Hello React',
    count: 100,
  };

  handleClick() {
    alert('我是事件');
  }
  render() {
    // 渲染完成后，this指向当前组件实例对象
    console.log('this----->', this);
    // 获取state状态数据
    return (
      <div>
        <h3>msg：{this.state.msg}</h3>
        <h3>count：{this.state.count}</h3>

        {/* 事件 */}
        {/* on+大写驼峰事件名={函数名} */}
        <button onClick={this.handleClick}>点我</button>

        {/* 使用行内写法 */}
        {/* <button onClick={function () { alert('我是事件'); }} > 点我2 </button> */}
        {/* 使用行内箭头函数写法 */}
        <button onClick={() => alert('我是事件')}> 点我2</button>
      </div>
    );
  }
}

// 这是React18版本新出的挂载节点的方法
const root = createRoot(document.getElementById('root'));
root.render(<HandleHello></HandleHello>);
